<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>确认订单</title>
    <link href="${applicationScope.basePath}/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/index.css">
    <script src="${applicationScope.basePath}/js/jquery-3.4.1.min.js"></script>
    <script src="${applicationScope.basePath}/js/jquery.serializejson.js"></script>
    <script src="${applicationScope.basePath}/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/model.css">
    <style>
        .table th, .table td {
            text-align: center;
            vertical-align: middle !important;
        }

        .cp {
            WORD-WRAP: break-word;
            TABLE-LAYOUT: fixed;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
        }

        input {

            border-bottom: 1px solid #9dc4ff;
            border-top: 0px;
            border-left: 0px;
            border-right: 0px;
            width: 200px;
        }

        h3 {
            font-weight: bold;
        }
    </style>
</head>
<body>
<jsp:include page="../header.jsp" flush="true"/>
<div class="container wow slideInDown" style="padding-top:80px;">
    <h3>确认订单信息</h3>
    <hr/>
    <div style="background-color: white;">
        <div class="panel-body">
            <div class="bs-example" data-example-id="table table-striped">
                <table class="table table-condensed">
                    <thead>
                    <tr>
                        <th style="width: 10%;text-align: left;">编号</th>
                        <th style="text-align: left;width: 30%;">商品信息</th>
                        <th style="width: 10%;">单价</th>
                        <th style="width: 10%;">数量</th>
                        <th style="width: 10%;">金额</th>
                        <th style="width: 30%;">备注(可选)</th>
                    </tr>
                    </thead>
                    <tbody id="content">
                    <c:forEach items="${sessionScope.ordersList}" var="item" varStatus="vs">
                        <tr>
                            <td class="tb1_td1" style="width: 10%;text-align: left;">${vs.count}</td>
                            <td style="width: 30%;">
                                <div class="row">
                                    <div class="col-md-3">
                                        <a href="${applicationScope.basePath}/goods/detail/${item.goods_id}"
                                           class=""
                                           title="点击查看详情">
                                            <img style="width: 110px;height: 70px;" class='img-rounded'
                                                 src="${applicationScope.imgPath}/${item.goodsExtend.imageList[0].imgUrl}"
                                                 alt="...">
                                        </a>
                                    </div>
                                    <div class="col-md-7" style="font-size:13px;color:#888888;margin-left: 40px;">
                                        <p class="cp">${item.goodsExtend.goods.describle}</p>
                                    </div>
                                </div>
                            </td>
                            <td style="font-weight: bold;width: 10%;">￥${item.goodsExtend.goods.price}</td>
                            <td style="width: 10%;">${item.need_num}</td>
                            <td style="color: #db5e5e;font-weight: bold;width: 10%;">￥${item.order_price}</td>
                            <td style="width: 30%;">
                                <input hidden="hidden" id="ids_${vs.count}" value="${item.goods_id}"/>
                                <input id="note_${vs.count}" type="text" maxlength="50" class="" placeholder=""/>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <hr/>
    <form id="ordersForm" action="${applicationScope}/orders/confirm" method="post">
        <div class="text-center">
            <label>交易地址：
                <input name="address" type="text" required="required" class="" style="width: 600px;" placeholder="">
            </label>
            <label>联系电话：
                <input name="phone" type="text" required="required" class="" style="width: 600px;" placeholder=""
                       value="${sessionScope.activeUser.phone}">
            </label><br/>
        </div>
        <hr/>
        <table class="table table-condensed">
            <tr style="background-color: wheat;">
                <td class="tb3_td3">合计:￥<span id="totalPrice" style="color: red;">${sessionScope.totalPrice}</span></td>
                <td class="tb3_td4 pull-right">
                    <button id="buy_btn" class="btn btn-danger" type="submit">确认购买</button>
                    <a id="cancel_btn" class="btn btn-info" href="${applicationScope.basePath}/orders/cancel">取消订单</a>
                </td>
            </tr>
        </table>
    </form>
</div>
<footer>
    <hr/>
    <p style="text-align: center;">&copy; 二手交易平台 2020</p>
</footer>
<script>
    $(function () {
        /*确认购买*/
        $("#ordersForm").submit(function (encodedURIComponent) {
            $("#buy_btn").button('loading');
            //获取表单信息,转化为json字符串
            let data = $("#ordersForm").serializeJSON();
            let jsonArr = [];
            let str = '';
            // 获取每个商品的备注
            for(let i = 1;i <= $("#content tr").length;i++){
                str = {'goods_id':$("#ids_" + i).val(),'order_note':$('#note_' + i).val()};
                jsonArr.push(str);
            }
            data.ordersList = jsonArr;
            //校验通过,发送ajax请求,提交表单
            $.ajax({
                url: "${applicationScope.basePath}/orders/confirm",
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(data),
                success: function (data) {
                    $("#buy_btn").button('reset');
                    if (data.flag) {
                        alert("下单成功");
                    } else {
                        alert(data.errorMsg);
                    }
                },
                error: function (data) {
                    //跳转到错误页面
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
